﻿@page "/circular-gauge/export"

@using Syncfusion.Blazor.CircularGauge;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Inputs;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the print and export functionality of circular gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to export and print the rendered circular gauge. The circular gauge can be exported to JPEG, PNG, SVG and PDF formats. Print functionality is done by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Print_System_Object_'>Print</a></code> method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_AllowPrint'>AllowPrint</a></code> is set as true. Export functionality is done by <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Export_Syncfusion_Blazor_CircularGauge_ExportType_System_String_System_Object_System_Nullable_System_Boolean__'>Export</a></code> method when <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_AllowImageExport'>AllowImageExport</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_AllowPdfExport'>AllowPdfExport</a></code> is set as true.</p>
   <p> More information on the print and export can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/print'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfCircularGauge @ref="@Gauge" AllowPdfExport="true" AllowPrint="true" AllowImageExport="true">
        <CircularGaugeAxes>
            <CircularGaugeAxis Radius="80%" StartAngle="0" EndAngle="0" Direction="GaugeDirection.AntiClockWise">
				<CircularGaugeAxisLineStyle Width="0"/>
                <CircularGaugeAxisMajorTicks Position="Position.Outside" Width="1" Height="25" Interval="10" UseRangeColor="true"/>
				<CircularGaugeAxisMinorTicks Position="Position.Outside" Width="1" Height="8" Interval="2" UseRangeColor="true"/>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="0" End="32" Radius="90%" StartWidth="10" EndWidth="35" Color="#F8A197"/>
                    <CircularGaugeRange Start="32" End="70" Radius="90%" StartWidth="10" EndWidth="35" Color="#C45072"/>
                    <CircularGaugeRange Start="70" End="100" Radius="90%" StartWidth="10" EndWidth="35" Color="#1B679F"/>
                </CircularGaugeRanges>
                <CircularGaugeAxisLabelStyle Offset="2" Position="Position.Outside" UseRangeColor="true">
                    <CircularGaugeAxisLabelFont Color="#424242" FontFamily="Roboto" Size="12px" FontWeight="Regular"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugePointers>
                    <CircularGaugePointer PointerWidth="0" Radius="0%">
                        <CircularGaugeCap Radius="0"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" title="Properties" style="width: 120%" class="property-panel-table">
                <tbody>
                    <tr>
                        <td>
                            <div class="property-text">Export Type</div>
                        </td>
                        <td>
                            <div style="margin-left: -10px">
                                <SfDropDownList TValue="string" TItem="FileTypeList" DataSource="@FileTypes" @bind-Value="@FileType" Width="65%">
                                    <DropDownListEvents TValue="string" TItem="FileTypeList" ValueChange="GaugeValueChange"/>
                                    <DropDownListFieldSettings Text="Name" Value="Name"/>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="property-text">File Name</div>
                        </td>
                        <td>
                            <div class="e-float-input" style="margin-top: 0px;  margin-left: -10px;width:70%">
                                <SfTextBox Value="@FileName" ValueChange="@NameChange" Placeholder="Circular Gauge"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 7%;">
                            <SfButton OnClick="ExportClick" CssClass="e-info" IsToggle="true" IsPrimary="true">Export</SfButton>
                        </td>
                        <td>
                            <SfButton OnClick="PrintClick" CssClass="e-info" IsToggle="true" IsPrimary="true">Print</SfButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    tr {
        height: 50px;
    }
    td {
        width:50%;
    }
</style> 
@code {
    SfCircularGauge Gauge;
    private string FileType { get; set; } = "JPEG";
    private string FileName { get; set; } = "Circular Gauge";
    public class FileTypeList {
        public string Name { get; set; }
    }
    private List<FileTypeList> FileTypes = new List<FileTypeList> {
        new FileTypeList { Name="JPEG" },
        new FileTypeList { Name="PNG" },
        new FileTypeList { Name="SVG" },
        new FileTypeList { Name="PDF" }
    };
    private void GaugeValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FileTypeList> args) {
        FileType = args.Value;
    }
    private void NameChange(Syncfusion.Blazor.Inputs.ChangedEventArgs args) {
        FileName = args.Value;
    }
    private async Task ExportClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        ExportType exportFileType = ExportType.JPEG;
        switch (FileType) {
            case "JPEG":
                exportFileType = ExportType.JPEG;
                break;
            case "PNG":
                exportFileType = ExportType.PNG;
                break;
            case "SVG":
                exportFileType = ExportType.SVG;
                break;
            case "PDF":
                exportFileType = ExportType.PDF;
                break;
        }
        await this.Gauge.ExportAsync(exportFileType, FileName);
    }
    private async Task PrintClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        await this.Gauge.PrintAsync();
    }
}


